import React, { useContext } from 'react';
import { Table, Tag } from 'antd';
import classnames from 'classnames';

import { getRangeDescription } from '@/pages/SalaryManage/SalaryCalculate/InsuranceFundFile/rangeDescription';
import { connect } from 'umi'
import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';

import util from '@/pages/SalaryManage/SalaryCalculate/InsuranceFundFile/skillsDevelopmentTax/util';

import BaseSettingContext from './BaseSettingContext';
import style from './index.less';

const MODIFY_STATUS = {
    // 正常
    0: {
        tag: null,
        rowTheme: null
    },
    // 新增
    1: {
        tag: {
            text: '新增',
            color: 'cyan'
        },
        rowTheme: 'add'
    },
    // 删除
    2: {
        tag: {
            text: '删除',
            color: 'red'
        },
        rowTheme: 'delete'
    },
    // 编辑
    3: {
        tag: {
            text: '编辑',
            color: 'blue'
        },
        rowTheme: null
    }
};

/**
 * 表格列定义
 * @returns []
 */
const onFieldCell = field => record =>
    (record?.[field] === 1 ? { 'data-cell-theme': 'modified' } : { 'data-cell-theme': '' });

const tableColumn = (showCompareEffect, scale) => [
    {
        title: '雇员该自然月薪资总额',
        dataIndex: 'vvTotalRange',
        align: 'left',
        width: 180,
        render: (text, record) => {
            const { twStartAmt = null, twStartAmtSign = null, twEndAmt = null, twEndAmtSign = null } = record || {};
            const str = getRangeDescription(util.getNumberFormat(twStartAmt, false, scale), twStartAmtSign, util.getNumberFormat(twEndAmt, false, scale), twEndAmtSign, '$');
            const statusMapperInfo = MODIFY_STATUS[record.editStatus] ?? MODIFY_STATUS[0];
            const tagInfo = showCompareEffect ? statusMapperInfo.tag : MODIFY_STATUS['0'];

            return <div>
                <EmptyPlaceHolder value={str} />
                {tagInfo ? <Tag color={tagInfo.color} className={style.ml8}>{tagInfo.text}</Tag> : null}
            </div>
        },
        onCell: onFieldCell('twPeriodEditStatus')
    },

    {
        title: '雇主扣除额',
        dataIndex: 'amount',
        align: 'left',
        width: 120,
        render: (text, record) => {
            const { sdlAmt = '', sdlRate = '', sdlPayStyle = '' } = record || {};
            const str = sdlPayStyle === 2 ? `月薪资总额 ${util.getNumberFormat(sdlRate, true, scale)}%` : `$${util.getNumberFormat(sdlAmt, false, scale)}`;
            return <EmptyPlaceHolder value={sdlPayStyle ? str : null}></EmptyPlaceHolder>
        },
        onCell: onFieldCell('sdlEditStatus')
    }

];

const getGroupKey = item => item?.housePlace;


const TableWrapper = ({
    columns,
    dataSource,
    showCompareEffect,
    comparePosition,
    hoverRow,
    selectedRow,
    setCurrentHoverRow,
    setCurrentSelectedRow
}) => {
    const tableProps = {
        onRow: (record, index) => ({
            className: classnames({

                'row-hover': hoverRow && getGroupKey(hoverRow.row) === getGroupKey(record),
                'row-cell-hover': hoverRow?.index === index,
                'row-selected': selectedRow?.index === index
            }),
            onClick: () => {
                setCurrentSelectedRow({ position: comparePosition, row: record, index });
            },
            onMouseEnter: () => {
                setCurrentHoverRow({ position: comparePosition, row: record, index });
            },
            onMouseLeave: () => {
                setCurrentHoverRow(null);
            },
            'data-row-theme': showCompareEffect
                ? (MODIFY_STATUS[record?.editStatus] || MODIFY_STATUS['0'])?.rowTheme || ''
                : '',
            'data-cell-theme': record?.editStatus === 1 ? 'modified' : ''
        })
    };

    return (
        <div>
            <Table
                size="small"
                tableLayout="fixed"
                columns={columns}
                rowKey={(record, index) => index}
                dataSource={dataSource}
                pagination={false}
                scroll={{ x: 'max-content' }}
                bordered={false}
                {...tableProps}
            />
        </div>
    );
};

const CompareItem = ({
    dataSource,
    showCompareEffect = false,
    comparePosition,
    hoverRow,
    selectedRow,
    setCurrentHoverRow,
    setCurrentSelectedRow
}) => {
    const { contextState: { scale = 2 } } = useContext(BaseSettingContext);
    return <div className="compare-item">
        <TableWrapper
            columns={tableColumn(showCompareEffect, scale)}
            dataSource={dataSource}
            showCompareEffect={showCompareEffect}
            pagination={false}
            comparePosition={comparePosition}
            hoverRow={hoverRow}
            selectedRow={selectedRow}
            setCurrentHoverRow={setCurrentHoverRow}
            setCurrentSelectedRow={setCurrentSelectedRow}
        />
    </div>
};

export default connect()(CompareItem);
